<template>
  <div class="channel-list-page">
    <h3>通道管理</h3>
    <AreaWarp :padding="true">
      <SearchWarp :label="'通道名称'">
        <el-input v-model.trim="searchInfo.channelName" placeholder="请输入通道名称"></el-input>
      </SearchWarp>
      <BtnWarp>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button type="info" icon="el-icon-delete" @click="reset">重置</el-button>
      </BtnWarp>
    </AreaWarp>

    <BtnWarp>
      <el-button class="add" type="primary" icon="el-icon-plus" @click="edit(1)">新增通道</el-button>
    </BtnWarp>

    <!-- 搜索结果 -->
    <AreaWarp :padding="false" v-loading="loading">
      <el-table
        :data="tableInfo.list"
        style="width: 100%"
        class="pub-table"
        header-row-class-name="pub-table-header-row"
        header-cell-class-name="pub-table-header-cell"
        tooltip-effect="dark"
      >
        <el-table-column prop="channelName" label="通道名称" width="180"></el-table-column>
        <el-table-column prop="serviceProviderName" label="服务商" width="180"></el-table-column>
        <el-table-column prop="channelAccount" label="通道账号"></el-table-column>
        <el-table-column label="签名">
          <template slot-scope="scope">
            <span
              v-for="(item,index) in scope.row.signName"
            >{{ item.signName }}{{scope.row.signName.length == index + 1 ? "" : ","}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="创建时间" :formatter="formatter_timeYMDHMS"></el-table-column>
        <el-table-column prop="id" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pub-page"
        @size-change="handleSizeChange"
        @current-change="search"
        :current-page="searchInfo.page"
        :page-sizes="[20, 50, 100]"
        :page-size="searchInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableInfo.total"
      ></el-pagination>
    </AreaWarp>

    <!-- 新增、编辑对话框 -->
    <channelEdit :message="message" v-if="editVisible" :flag="flag" @channelEdit="channelEdit"></channelEdit>
  </div>
</template>
<script>
import channelEdit from "./channelEdit";
import Sms from "../../../assets/js/sms.js";
export default {
  components: {
    channelEdit
  },
  data() {
    return {
      searchInfo: {
        id: "",
        channelName: "",
        serviceProviderName: "",
        channelAccount: "",
        signNames: "",
        masterIp: "",
        addTime: "",
        page: 1,
        size: 20
      },
      tableInfo: {
        list: [],
        total: 0
      },
      editVisible: false,
      message: null,
      flag: 1,
      loading: false
    };
  },
  methods: {
    handleSizeChange(val) {
      let that = this;
      that.searchInfo.size = val;
      that.searchInfo.page = 1;
      that.search();
    },
    //搜索
    search(currentPage) {
      let that = this;
      that.searchInfo.page = typeof currentPage == "number" ? currentPage : 1;

      let x = {
        channelName: that.searchInfo.channelName,
        page: that.searchInfo.page,
        size: that.searchInfo.size
      };

      let sms = new Sms(x);
      let reqData = sms.getState();

      if (reqData.code) {
        that.showMsg(reqData.message, "error");
        return;
      }
      that.loading = true;
      that.ajaxJson({
        url: "/channel/channelManage/listChannel",
        data: reqData,
        success: function(res) {
          if (res.code == "0") {
            that.tableInfo = res.data;
          }
          that.loading = false;
        }
      });
    },
    //重置
    reset() {
      let that = this;
      that.searchInfo = {
        id: "",
        channelName: "",
        serviceProviderName: "",
        channelAccount: "",
        signNames: "",
        masterIp: "",
        addTime: "",
        page: 1,
        size: 20
      };
      that.search();
    },
    //新增、编辑通道
    edit(row) {
      let that = this;
      if (row == 1) {
        that.flag = 1;
        that.message = null;
      } else {
        that.flag = 2;
        that.message = {
          id: row.id,
          channelName: row.channelName,
          serviceProviderName: row.serviceProviderName,
          serviceProviderId: row.serviceProviderId,
          channelAccount: row.channelAccount,
          signName: row.signName,
          masterIp: row.masterIp,
          addTime: row.addTime
        };
      }
      that.editVisible = true;
    },
    channelEdit() {
      let that = this;
      that.message = null;
      that.editVisible = false;
      that.search();
    },
    //删除
    del(row) {
      let that = this;
      that
        .$confirm("确定删除该通道消息?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          that.ajaxJson({
            url: "/channel/channel/delete",
            data: {
              id: row.id
            },
            success: function(res) {
              if (res.code == "0") {
                that.showMsg("删除成功！", "success");
                that.search();
              }
            }
          });
        })
        .catch(() => {
          that.showMsg("已取消删除", "info");
        });
    }
  },
  created() {
    let that = this;
    that.search();
  }
};
</script>
<style lang="less">
.channel-list-page {
  .add {
    float: left;
  }
}
</style>
